<template>
  <div>
    <!--  数据展示  -->
    <el-table
      :data="tableData.slice(5*(this.currentPage-1),(5*this.currentPage))"
      height="270"
      border
      style="width: 100%">
      <el-table-column
        prop="id"
        label="ID"
        width="300">
      </el-table-column>
      <el-table-column
        prop="name"
        label="姓名"
        width="300">
      </el-table-column>
      <el-table-column
        prop="age"
        label="年龄"
        width="300">
      </el-table-column>
      <el-table-column align="center" label="操作" min-width="300">
        <template slot-scope="scope">
          <el-button size="mini" type="danger" @click="deleteUser(scope.$index, scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!--    分页-->
    <el-pagination
      background
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page.sync="currentPage"
      :pager-count="5"
      :page-size="5"
      layout="total, prev, pager, next"
      :total="this.tableData.length">
    </el-pagination>
  </div>

</template>

<script>
export default {
  name:"deleteUser",
  created() {
    this.getData()
  },
  data() {
    return {
      formInline: {
        user: '',
        age: '',
      },
      tableData: [],
      searchTableData:[],
      //分页
      currentPage:"",
    }
  },
  methods:{
    async getData(){
      var _this=this;
      await this.axios({
        method:"get",
        url:"http://192.168.1.3:8080/getData",
      }).then(function (response){
        response.data.forEach((item) => {
          _this.tableData.push({
            id: item.id,
            name: item.name,
            age: item.age,
          })
          _this.searchTableData=_this.tableData;
        });
      });
    },
    async deleteUser(index, row) {
      await this.$confirm('确定要删除吗?', '信息', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        var _this = this;
        await this.axios({
          method: "post",
          url: "http://192.168.1.3:8080/deleteData",
          data: {
            id: row.id,
          },
        }).then(function (response) {
          if(response.data=="Ok"){
            _this.$message.success("删除成功")
          }else {
            _this.$message.error("删除失败")
          }
        });
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
      this.tableData = [];
      this.searchTableData = [];
      await this.getData();
    },
    //分页
    handleSizeChange(){
    },
    handleCurrentChange(){
    },
  },
}
</script>

